import { Component } from '@angular/core';
import { HeroDetailComponent } from './hero-detail.component';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { HeroService } from './hero.service';
import { OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({

  moduleId : module.id,
  selector: 'my-heroes',
  templateUrl: 'heroes.component.html',
  styleUrls: ['heroes.component.css'],
 
})
export class HeroesComponent implements OnInit{

    constructor(private heroService: HeroService,private router:Router) {}

    getHeroes():void{
      this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    }

    gotoDetail(): void {
      this.router.navigate(['/detail', this.selectedHero.id]);
    }

    heroes = HEROES;
    selectedHero: Hero;

    ngOnInit() :void {
      this.getHeroes();
    }

    onSelect(hero: Hero): void {
      this.selectedHero = hero;
    }
    
}
